<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>父传子：父组件的数据传给子组件</h1>
        <child1 :msg="info1" word="2022"></child1>
    </div>
    <template id="child1">
        <div>
            <mark>
                父传子，子组件想获取父组件中的数据-----{{msg}},{{word}}
                步骤1：在子组件的标签上添加属性；
                步骤2:在子组件的实例中通过props接受，然后就能正常使用
            </mark>
        </div>
    </template>
    <script src="../0511/js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: { // 这是父组件的数据
                info1: 'hello,我是父组件中的消息'
            },
            components: {
                'child1': {
                    template: '#child1',
                    props: ['msg', 'word'],
                    data() {
                        return { // 这是子组件的数据
                            // xxx:xxx
                        }
                    },
                    created() {
                        console.log(111, this.msg);
                    }
                }
            }
        })
    </script>
</body>
</html>